<script lang="ts" setup>
/**
 * 节点通用属性栏
 */
import { defineProps, ref } from 'vue'
import { Cell } from '@antv/x6'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  cell: Cell
}>()

const _cell = ref<any>()

onMounted(() => {
  init()
})
watch(() => props.cell, () => {
  init()
})

function init () {
  _cell.value = { attrs: ObjectUtil.copy(props.cell.attrs) }
}

// 设置属性
function attrsHandle (key: string, val?: string, defaultValue?: any) {
  props.cell.attr(key, val || defaultValue)
}
</script>

<template>
  <div v-if="_cell" class="attr-grid" style="grid-template-columns: repeat(2, 1fr);">
    <el-form-item label="边框颜色">
      <el-color-picker
        v-model="_cell.attrs.body.style.borderColor" show-alpha
        @change="attrsHandle('body/style/borderColor', $event, 'rgba(0,0,0,0)')"
      />
    </el-form-item>
    <el-form-item label="边框宽度">
      <el-input-number v-model="_cell.attrs.body.style.borderWidth" :min="0" @change="attrsHandle('body/style/borderWidth', $event, 0)" />
    </el-form-item>
    <el-form-item label="填充颜色">
      <el-color-picker
        v-model="_cell.attrs.body.style.backgroundColor" show-alpha
        @change="attrsHandle('body/style/backgroundColor', $event, 'rgba(0,0,0,0)')"
      />
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
</style>
